<template>
  <fieldset>
    <legend>tab切换</legend>
    <button v-for="btn in buttons" :key="btn"
      :class=" ['tab',{ active: btn===selectBtn }]"
      @click="handleClick(btn)">{{btn}}</button>
    <div :is="selectBtn"></div>
  </fieldset>
</template>  

<script>
// 1引入
import emailCom from "./email.vue";
import homeCom from "./home.vue";
import mineCom from "./mine.vue";

export default {
  // 2注册

  data() {
    return {
      buttons: ["email", "home", "mine"],
      selectBtn: "email",
      
    };
  },

  methods: {
    handleClick(btn) {
     this.selectBtn=btn;
      console.log(btn);
      
      
    },
  },
  components: {
    'email': emailCom,
    'home': homeCom,
    'mine': mineCom,
  },
};
</script>

<style scoped>
.tab {
  background:white;
}
.tab.active {
  background: hotpink;
}
</style>





















